防抖（Debounce）和节流（Throttle）是 JavaScript 中常用的优化性能的技术。

防抖和节流的目的都是为了减少因为事件频繁触发导致的性能问题。它们的主要区别在于执行回调函数的时机不同。

防抖的原理是，在触发事件后，在一定的时间间隔内如果没有再次触发同样事件，才会执行回调函数。也就是说，当事件触发后，我们设定一个定时器，在定时器时间内，如果再次触发了该事件，就把原来的定时器清空，重新开始计时。只有当计时器计时结束时，才真正执行回调函数。

节流的原理是，设定一个时间阈值，在这个时间阈值内无论事件触发多少次，只会执行一次回调函数。也就是说，在这个时间阈值内，回调函数最多只会被执行一次。

通俗来讲，防抖就像是你在开关上按下去，但只有当你松手后才真正进行操作。而节流则像是你在水龙头上，每隔一段时间才会放出一次水。

在实际应用中，防抖和节流可以用于监听滚动、输入框搜索等频繁触发的事件，以达到减少计算和网络请求等资源消耗的目的。


## 防抖 debounce

监听一个输入框的，文宇变化后触发 change 事件  
直接用keyup 事件 ，则会频发触发 change 事件  
防抖：用户输入结束或暂停时，才会触发 change 事件

``` js 

function debounce(fn, delay){
    let timer = null;

    return function(){
        if(timer){
            crearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay)
    }
}

input1.addEventListener('keyup', debounce(function(){
    // xxx
}))

```



## 节流 throttle
- 拖拽一个元素时，要随时拿到该元素被拖拽的位置 
- 直接用 dirag 事件，则会频发触发，很容易导致卡顿 
- 节流：无论拖拽速度多快，都会每隔 100ms 触发一次


```js 
function throttle(fn, delay=100){
    let timer = null;
    return function(){
        if(timer){
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer
        }, delay)
    }
}


```
